<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas9</title>
</head>

<body>
    <canvas id="app" width="500" height="600"></canvas>
    <script type="text/javascript">
    function draw25(id) {
        var canvas = document.getElementById(id);
        if (canvas == null)
            return false;
        var context = canvas.getContext('2d');
        var g1 = context.createLinearGradient(0, 0, 0, 300);

        g1.addColorStop(0, 'rgb(255,0,0)'); //红  
        g1.addColorStop(0.5, 'rgb(0,255,0)'); //绿
        g1.addColorStop(1, 'rgb(0,0,255)'); //蓝

        //可以把lg对象理解成GDI中线性brush
        context.fillStyle = g1;
        //再用这个brush来画正方形
        context.fillRect(0, 0, 400, 300);
    }
    draw25("app");
    </script>
</body>

</html>
